<template>
	<!-- 退货详细 -->
	<view class="box">
		<!-- 2 -->
		<view class="anyone">
			<view class="" v-for="item in dataAll.goods_list" :key="item.id">
				<view class="item2">
					<view class="item2Left">
						<view class="">
							<image :src="item.goods_image" mode=""></image>
							<view class="item2Left1" v-show="item.zs_remark">{{item.zs_remark}}</view>
						</view>
					</view>
					<view class="item2Right">
						<view class="item2RightTop">
							<view class="t3">{{item.goods_name}}</view>
							<view class="k1">
								<!-- <view class="t2">积分抵扣：{{item.jf_money}}分</view> -->
							</view>
						</view>
						<view class="item2RightBottom">
							<view class="item2RightBottomLeft">×{{item.number}}</view>
							<view class="item2RightBottomRight">小计：{{item.amount}}</view>
						</view>
					</view>
				</view>
				
				<view class="anyone2">
					<view class="anyone2Left">优惠券抵扣金额</view>
					<view class="anyone2Right">{{item.youhui_money || 0}}元</view>
				</view>
			</view>
			<view class="bottom_item">
				
				<view class="anyone2">
					<view class="anyone2Left">实付款</view>
					<view class="anyone2Right">￥{{dataAll.amount}}</view>
				</view>
			</view>
		</view>

		<view class="item3">
			<view class="list">
				<view class="listLeft">可退积分</view>
				<view class="listRight">
					<view class="">积分：{{dataAll.jf_money}}</view>
				</view>
			</view>
			<view class="list">
				<view class="listLeft">可退金额</view>
				<view class="listRight">
					<view class="money">￥{{dataAll.amount}}</view>
				</view>
			</view>
		</view>

		<view class="item4">
			<view class="title">商家收货信息</view>
			<view class="bottom">
				<view class="ipt">{{dataAll.shangjia.gongsi}}</view>
			</view>
			<view class="bottom">
				<view class="ipt">{{dataAll.shangjia.mobile}}</view>
			</view>
			<view class="bottom">
				<view class="ipt">{{dataAll.shangjia.dianpu+dataAll.shangjia.address}}</view>
			</view>
		</view>


		<view class="item4">
			<view class="title">退款理由</view>
			<view class="bottom">
				<view class="ipt"><input type="text" placeholder="请输入退款理由" v-model="dataAll.tk_desc" /></view>
			</view>
			<!-- <view class="selectFile">
				<view class="example-body">
					<uni-file-picker></uni-file-picker>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/commonFun/httpRequest.js");
	export default {
		data() {
			return {
				ordernum: '', //订单号
				dataAll: {}, //订单数据
				totlemoney: '',
			};
		},
		onLoad(options) {
			// console.log(options);
			this.ordernum = options.orderNum;
			this.orderdetail(options.orderNum);
		},
		methods: {
			orderdetail(num) {
				let _this = this;
				httpRequest.request('appapi/applet/order/orderInfo', 'POST', {
					order_num: num,
				}).then(res => {
					if (res.code == 1) {
						let num = 0;
						res.data.goods_list.forEach(item => {
							num = Number(num) + Number(item.number)
						})
						_this.$set(res.data, "totalNum", num);
						_this.dataAll = res.data;
					} else {
						httpRequest.toast(res.msg);
					}
				})
			}

		}
	};
</script>

<style scoped lang="scss">
	.color1 {
		color: #999999 !important;
	}

	.color {
		color: #ff0000 !important;
		font-size: 30rpx !important;
	}

	.box {
		// padding: 30rpx;
		margin-top: 20rpx;

		.btnBox {
			padding: 58rpx;

			.btn {
				background: #F5AC4F;
				border-radius: 46rpx;
				text-align: center;
				padding: 29rpx 0;
				color: #ffffff;
			}
		}

		.item4 {
			background-color: #ffffff;
			overflow: hidden;
			margin-top: 30rpx;

			.title {
				margin: 21rpx 32rpx;
				font-size: 30rpx;
				font-weight: 800;
				color: #333333;
			}

			.selectFile {
				padding: 59rpx 37rpx 79rpx 37rpx;

				.example-body {
					width: 600rpx;
					margin: 0 auto;
				}
			}

			.bottom {
				width: 600rpx;
				margin: 25rpx auto;
				background-color: #f6f6f6 !important;
				border-radius: 46rpx;
				overflow: hidden;

				.ipt {
					padding: 22rpx 47rpx;

					font-size: 30rpx;
					font-weight: 800;
					color: #999999;
				}
			}
		}

		.item3 {
			width: 640rpx;
			margin: 30rpx auto;
			padding: 10rpx 30rpx;
			background: #ffffff;
			border-radius: 30rpx;

			.list {
				display: flex;
				justify-content: space-between;
				margin: 25rpx 0;

				.listLeft {
					font-size: 30rpx;
					font-weight: 500;
					color: #000000;
				}

				.listRight {
					font-size: 24rpx;
					font-weight: 800;
					color: #000000;

					.money {
						color: #ff0000;
					}
				}
			}
		}

		.anyone {
			width: 640rpx;
			margin: 30rpx auto;
			background: #ffffff;
			padding: 40rpx 30rpx;
			border-radius: 30rpx;

			.anyone2 {
				display: flex;
				justify-content: space-between;
				margin: 23rpx;
				font-size: 30rpx;
				font-weight: 800;
				font-family: PingFang SC;

				.anyone2Left {
					color: #333333;
				}

				.anyone2Right {
					image {
						width: 12rpx;
						height: 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.item2 {
				display: flex;
				margin-bottom: 20rpx;

				.item2Right {
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					width: 100%;
					.item2RightTop {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
						// display: flex;
						display: inline-block;

						.t3 {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.k1 {
							display: flex;

							.t1 {
								display: inline-block;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #ffffff;
								border-radius: 7rpx;
								padding: 3rpx;
								display: flex;
								margin: 0 14rpx;
							}

							.t3 {
								font-size: 24rpx;
								font-weight: 800;
								color: #999999 !important;
							}

							.t2 {
								display: inline-block;
								font-size: 24rpx;
								color: #333333 !important;
							}
						}
					}

					.item2RightBottom {
						display: flex;
						justify-content: space-between;
						margin-top: 20rpx;

						.item2RightBottomLeft {
							font-size: 26rpx;
							font-weight: 700;
							color: #999999;
						}

						.item2RightBottomRight {
							font-size: 30rpx;
							font-weight: 700;
						}
					}
				}

				.item2Left {
					margin-right: 31rpx;
					border-radius: 20rpx;

					// overflow: hidden;
					view {
						position: relative;

						image {
							border-radius: 20rpx;
							width: 252rpx;
							height: 208rpx;
						}

						.item2Left2 {
							position: absolute;
							top: 40%;
							left: 50%;
							color: #ffffff;
							text-align: center;
							font-size: 12px;
							align-items: center;
							transform: translate(-50%, -50%);
							// width: ;
							// transform: translateY(-50%);
						}

						.item2Left1 {
							position: absolute;
							top: 0;
							left: 0;
							background-color: #ff0000;
							border-radius: 25rpx 0rpx 25rpx 0rpx;
							font-size: 24rpx;
							color: #ffffff;
							padding: 5rpx 10rpx;
						}
					}
				}
			}
		}
	}
</style>
